<%--
  Created by IntelliJ IDEA.
  User: 22328
  Date: 2021/2/17
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>用户统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a><cite>导航元素</cite></a></span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户统计</div>
                <div class="layui-card-body" style="min-height: 500px;">
                    <div id="main4" class="layui-col-sm12" style="height: 480px;"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">最新一周新增用户</div>
                <div class="layui-card-body" style="min-height: 500px;">
                    <div id="main1" class="layui-col-sm12" style="height: 480px;"></div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="./js/echarts.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    // tuesday wednesday thursday friday saturday sunday
    var monday = parseInt(${incrementNum.monday});
    var tuesday = parseInt(${incrementNum.tuesday});
    var wednesday = parseInt(${incrementNum.wednesday});
    var thursday = parseInt(${incrementNum.thursday});
    var friday = parseInt(${incrementNum.friday});
    var saturday = parseInt(${incrementNum.saturday});
    var sunday = parseInt(${incrementNum.sunday});

    // 指定图表的配置项和数据
    var option = {
        grid: {
            top: '5%',
            right: '1%',
            left: '1%',
            bottom: '10%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '新增用户量',
            data: [monday, tuesday, wednesday, thursday, friday, saturday, sunday],
            type: 'line',
            smooth: true
        }]
    };



    myChart.setOption(option);
</script>
<script type="text/javascript">
    var dom = document.getElementById("main4");
    var myChart = echarts.init(dom);
    var adminCount = parseInt(${adminCount});
    var userCount = parseInt(${userCount});
    var merchantCount = parseInt(${merchantCount});
    var app = {};
    option = null;
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}人"　　　//这是关键，在需要的地方加上就行了
        },
        xAxis: {
            type: 'category',
            data: ['管理员', '普通会员', '商家']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '用户统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top'
                            //formatter: '\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                            //formatter: "{b} : {c}"
                        }
                    }
                },
                data: [adminCount, userCount, merchantCount]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>

